<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add">新增充值订单</el-button>
				<el-button type="success" icon="sc-icon-download" @click="onBatchExport">导出</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-select style="width: 130px;" v-model="search.status" clearable placeholder="选择状态" filterable>
						<el-option v-for="(item, key) in statuss" :key="key" :label="item" :value="key" />
					</el-select>
					<el-date-picker style="width: 150px;" v-model="search.start_time" value-format="X" type="date"
						placeholder="开始时间" />
					<el-date-picker style="width: 150px;" v-model="search.end_time" value-format="X" type="date"
						placeholder="截止时间" />
					<el-input style="width: 220px;" v-model="search.keyword" placeholder="请输入订单号或会员ID" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
					<el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
				<el-table-column label="ID" prop="id" width="80"></el-table-column>
				<el-table-column label="订单信息" prop="ordernum" width="200">
					<template #default="scope">
						<p><strong>订单号：</strong>{{scope.row.ordernum}}</p>
						<p><strong>第三方单号：</strong>{{scope.row.tordernum || '暂无'}}</p>
					</template>
				</el-table-column>
				<el-table-column label="会员信息" prop="member_id" width="120">
					<template #default="scope">
						<p><strong>会员ID：</strong>{{scope.row.member_id}}</p>
					</template>
				</el-table-column>
				<el-table-column label="金额信息" prop="amount" width="150">
					<template #default="scope">
						<p><strong>充值金额：</strong>{{scope.row.amount}}元</p>
						<p><strong>赠送金额：</strong>{{scope.row.give}}元</p>
						<p><strong>总金额：</strong>{{(parseFloat(scope.row.amount) + parseFloat(scope.row.give)).toFixed(2)}}元</p>
					</template>
				</el-table-column>
				<el-table-column label="支付方式" prop="pay_type" width="120">
					<template #default="scope">
						<el-tag :type="getPayTypeTagType(scope.row.pay_type)">{{scope.row.pay_type_name}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态" prop="status" width="150">
					<template #default="scope">
						<el-tag :type="getStatusTagType(scope.row.status)">{{scope.row.status_name}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="时间" prop="create_time" width="180">
					<template #default="scope">
						<p><strong>创建时间：</strong>{{scope.row.create_time}}</p>
						<p><strong>更新时间：</strong>{{scope.row.update_time}}</p>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="right" width="200">
					<template #default="scope">
						<el-button size="small" type="info" @click="table_show(scope.row)">查看</el-button>
						<el-button 
							size="small" 
							type="success" 
							v-if="scope.row.pay_type == 5 && scope.row.status == 0"
							@click="table_audit(scope.row)">审核</el-button>
						<!-- 调试信息 -->
						<el-tag size="small" type="info">
							{{scope.row.pay_type}}/{{scope.row.status}}
						</el-tag>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
	<show-dialog v-if="dialog.show" ref="showDialog" @closed="dialog.show=false"></show-dialog>
	<audit-dialog v-if="dialog.audit" ref="auditDialog" @success="handleSaveSuccess" @closed="dialog.audit=false"></audit-dialog>
</template>

<script>
	import saveDialog from './components/save.vue'
	import showDialog from './components/show.vue'
	import auditDialog from './components/audit.vue'
	import config from "@/config/table";
	
	export default {
		name: 'rechargeOrderList',
		components: {
			saveDialog,
			showDialog,
			auditDialog
		},
		data() {
			return {
				search: {
					status: '',
					keyword: '',
					start_time: '',
					end_time: ''
				},
				dialog: {
					save: false,
					show: false,
					audit: false
				},
				list: {
					apiObj: this.$API.rechargeOrder.index
				},
				statuss: {
					'': '全部状态',
					'0': '待审核',
					'1': '支付成功',
					'2': '支付失败',
					'3': '已取消',
					'4': '已驳回'
				}
			}
		},
		mounted() {
			this.getInit()
		},
		methods: {
			// 获取支付方式标签类型
			getPayTypeTagType(payType) {
				const typeMap = {
					'1': 'success',    // 支付宝
					'2': 'success',    // 微信
					'3': 'warning',    // 银联
					'4': 'danger',     // 抖音
					'5': 'primary'     // 对公转账
				}
				return typeMap[payType] || 'info'
			},
			
			// 获取状态标签类型
			getStatusTagType(status) {
				const typeMap = {
					'0': 'warning',    // 待审核
					'1': 'success',    // 支付成功
					'2': 'danger',     // 支付失败
					'3': 'info',       // 已取消
					'4': 'danger'      // 已驳回
				}
				return typeMap[status] || 'info'
			},
			
			// 导出
			async onBatchExport() {
				var reqData = {
					[config.request.page]: this.$refs.table.currentPage,
					[config.request.pageSize]: this.$refs.table.scPageSize,
					[config.request.prop]: this.$refs.table.prop,
					[config.request.order]: this.$refs.table.order
				}
				let search = JSON.parse(JSON.stringify(this.search))
				var res = await this.$API.rechargeOrder.index.get({...reqData, ...this.$refs.table.tableParams, ...search, is_export: 1});
				if (res.code == 200) {
					window.open(res.data.url, '_blank')
				} else {
					this.$alert(res.msg, "提示", {
						type: 'error'
					})
				}
			},
			
			// 搜索
			upsearch() {
				let search = JSON.parse(JSON.stringify(this.search))
				// 如果状态不为空，转换为数字类型
				if (search.status !== '') {
					search.status = parseInt(search.status)
				}
				this.$refs.table.upData({
					...search
				})
			},
			
			// 重置搜索
			resetSearch() {
				this.search = {
					status: '',
					keyword: '',
					start_time: '',
					end_time: ''
				}
				this.upsearch()
			},
			
			// 新增
			add() {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open()
				})
			},
			
			// 编辑
			table_edit(row) {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open('edit').setData(row)
				})
			},
			
			// 查看
			table_show(row) {
				this.dialog.show = true
				this.$nextTick(() => {
					this.$refs.showDialog.open().setData(row)
				})
			},
			
			// 审核
			table_audit(row) {
				this.dialog.audit = true
				this.$nextTick(() => {
					this.$refs.auditDialog.open().setData(row)
				})
			},
			
			// 初始化
			async getInit() {
				// 可以在这里添加初始化逻辑
			},
			
			// 本地更新数据
			handleSaveSuccess(data, mode) {
				if(mode=='add'){
					this.$refs.table.unshiftRow(data)
				}else if(mode=='edit'){
					this.$refs.table.updateKey(data)
				}
			}
		}
	}
</script>

<style>
.right-panel-search {
	display: flex;
	align-items: center;
	gap: 12px;
}

.left-panel {
	display: flex;
	align-items: center;
	gap: 12px;
}

.el-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	background: #fff;
	border-bottom: 1px solid #ebeef5;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.right-panel-search .el-select {
	margin-right: 8px;
}

.right-panel-search .el-input {
	margin-right: 8px;
}

.right-panel-search .el-button {
	border-radius: 6px;
	font-weight: 500;
}

.right-panel-search .el-button:not(.el-button--primary) {
	border-color: #dcdfe6;
	color: #606266;
}

.right-panel-search .el-button:not(.el-button--primary):hover {
	border-color: #409eff;
	color: #409eff;
}

.left-panel .el-button {
	border-radius: 6px;
	font-weight: 500;
	padding: 12px 20px;
}

.el-main {
	background: #f5f7fa;
	padding: 20px;
}

.el-table {
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.el-table .el-tag {
	margin: 2px;
}
</style>
